<template>
    <Modal
        title="添加班级"
        :width="700"
        :value="value"
        @on-ok="ok"
        @on-cancel="cancel"
    >
        <div class="paper-search">
            <!--<Select v-model="params.classId" placeholder="班级" clearable>
                <Option value="1">电商一班</Option>
                <Option value="2">电商一班</Option>
                </Select>-->
            <Input v-model="params.className" placeholder="请输入试卷名称"></Input>
            <Button @click="search" type="primary">搜索</Button>
        </div>
        <Table :data="list" :columns="columns" @on-selection-change="changeSelect">

        </Table>
        <div class="content-footer">
            <Pagination
                :pageSize.sync="params.pageSize"
                :current.sync="params.pageNum"
                :total="params.total"
                @change="queryList"
            />

        </div>
    </Modal>
</template>
<script>
import { queryClassList } from '@/api/classManage'
export default {
    props: {
        value: {
            default: ''
        },
        nowStu: {
            default: ''
        }
    },
    data () {
        return {
            changeData: [],
            params: {
                total: 0,
                pageNum: 1,
                pageSize: 10,
                className: '',
                classId: ''
            },
            list: [],
            columns: [
                { type: 'selection', width: 60, align: 'center' },
                { title: '序号', type: 'index', align: 'center', width: 80 },
                { title: '班级编号', key: 'classNo', align: 'center' },
                { title: '班级名称', key: 'className', align: 'center' },
                { title: '所属专业', key: 'majorName', align: 'center' },
                { title: '入学学年', key: 'enterYear', align: 'center' },
                { title: '班级人数', key: 'stuNum', align: 'center' }
            ]
        }
    },
    created () {
        this.queryList()
    },
    methods: {
        search () {
            this.params.pageNum = 1
            this.queryList()
        },
        ok () {
            console.log(this.changeData)
            let classArr = this.changeData.map(item => {
                return item.classId
            })
            let classNameArr = this.changeData.map(item => {
                return item.className
            })
            this.$emit('getStudent', classArr.join(','))
            this.$emit('getStudentName', classNameArr.join(','))
            this.$emit('hideStu')
        },
        cancel () {
            this.$emit('hideStu')
        },
        changeSelect (data) {
            console.log(data)
            this.changeData = data
        },
        queryList () {
            let vm = this
            let params = {
                total: 0,
                pageNum: 1,
                pageSize: 10,
                className: this.params.className,
                classId: this.params.classId
            }
            queryClassList(params).then(({ data = {} }) => {
                if (data.code === '0000') {
                    vm.list = data.data.list
                    vm.params.total = data.data.total
                    vm.params.pageNum = data.data.pageNum
                    if (vm.nowStu != '') {
                        let nowStuList = vm.nowStu.split(',')
                        vm.list.map((item, index) => {
                            if (nowStuList.indexOf(item.classId) > -1) {
                                vm.list[index]._checked = true
                                this.changeData.push(item)
                            }
                        })
                    }
                }
            })
        }

    }
}
</script>
<style lang="less" scoped>
.content-footer{
    margin-top:15px;
}
.paper-search {
    margin-bottom: 14px;
    .ivu-select,
    .ivu-input-wrapper {
        width: 200px;
        margin-right: 10px;
    }
}
</style>
